<template>
  <div>
    <div class="content">
      <div>助力平台</div>
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#000"
        :default-active="activeIndex"
      >
        <el-menu-item index="1" @click="goIndex">首页</el-menu-item>
        <el-menu-item index="2" @click="goPerson">个人中心</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "KingsIndex",
  props: {
    active: {
      type: String,
    },
  },
  data() {
    return {
      activeIndex: "1",
    };
  },

  created() {
    this.activeIndex = this.active;
  },

  mounted() {},

  methods: {
    goIndex() {
      this.$router.push({ path: "/index" });
    },
    goPerson() {
      this.$router.push({ path: "/person" });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5vw;
  padding-right: 5vw;
  //   border-bottom: 2px solid black;
}

::v-deep .el-menu--horizontal > .el-menu-item.is-active {
  //   border-bottom: none;
}
</style>
